<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中工科技园区新闻动态</title>
    <script src="libs/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="libs/layui/layui.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="libs/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="libs/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="libs/css/index.css">
    <link rel="stylesheet" type="text/css" href="libs/css/reset.css">
</head>
<body>
<div class="container" >
    <h1 style="color: black">中原工学院大学科技园</h1>
</div>
<ul class="nnav layui-nav layui-bg-blue" lay-filter="">
    <div align="center">
        <li class="rl layui-nav-item"><a href="javascript:window.location.href='mindex.html'">园区概况</a></li>
        <li class="rl layui-nav-item layui-this"><a href="javascript:window.location.href='news.html';">园区新闻</a></li>
        <li class="rl layui-nav-item "><a href="javascript:window.location.href='interspace.html';">科技成果</a></li>
        <li class="rl layui-nav-item"><a href="gspace.html">众创空间</a></li>
        <li class="rl layui-nav-item"><a href="gardenservice.html">园区服务</a></li>
        <li class="rl layui-nav-item"><a href="javascript:window.location.href='register.html';">入住申请</a></li>
    </div>

</ul>
<div class="nnav layui-carousel" id="newsl">
    <div carousel-item style="height: 500px">
        <img src="img/news2.jpg"/>
        <img src="img/news1.jpg"/>
    </div>
</div>


<div class="content zhong">
    <div class="left_content">
        <div class="nav_tit">
            <h1>新闻中心</h1>
            <h2>the news center</h2>
        </div>
        <div class="nav_content">
            <ul>
                <li><a><h1>新闻摘要</h1></a></li>
                <li style="height:500px;background:#528078;color: #f7fbff;padding-left:10px;padding-right:10px;text-indent: 2em;font-family: '微软雅黑', '宋体'"> 新闻，是指报纸、电台、电视台、互联网等媒体经常使用的记录与传播信息的一种文体。是记录社会、传播信息、反映时代的一种文体。新闻概念有广义与狭义之分。广义上：除了发表于报刊、广播、互联网、电视上的评论与专文外的常用文本都属于新闻，包括消息、通讯、特写、速写（有的将速写纳入特写之列）等等；狭义上：消息是用概括的叙述方式，以较简明扼要的文字，迅速及时地报道附近新近发生的、有价值的事实，使一定人群了解。新闻一般包括标题、导语、主体、背景和结语五部分。前三者是主要部分，后二者是辅助部分。写法以叙述为主兼或有议论、描写、评论等。新闻是包含海量资讯的新闻服务平台,真实反映每时每刻的重要事件。</li>
            </ul>
        </div>
    </div>

    <div class="right_content">
        <div class="item">
            <h1>新闻中心 / <span>the news center</span></h1>
            <h2><a href="#"></a></h2>
            <div class="cb"></div>
        </div>
        <div class="news_text">
     <div id="content">


     </div>

            <div class="new_page" id="new_page">

            </div>
            <div class="cb"></div>
        </div>
    </div>

    <div class="cb"></div>
</div>


<!--<form action="file/upload.spring" method="post" enctype="multipart/form-data">
    <label>用户名：</label><input type="text" name="name"/><br/>
    <label>密 码：</label><input type="password" name="password"/><br/>
    <label>头 像</label><input type="file" name="file"/><br/>
    <input type="submit" value="提  交"/>
</form>-->

<iframe src="foot.html" width="100%" height="300px" scrolling="no"  frameborder="0" style="margin-top: 50px"></iframe>
</body>
</html>
<script type="text/javascript">
    layui.use('element', function(){
        var element = layui.element;
    });
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#newsl'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
        });
    });
    var pagenum = 1;
    gettable();
    function gettable() {
        $.ajax({
            url: 'gardenNews/listPage.spring',
            // type: 'default GET (Other values: POST)',
            dataType: 'json',
            data: {pageIndex: pagenum},
        })
            .done(function(e) {
                var data = e.data;
                 getInfo(data);
                layui.use('laypage', function(){
                    var laypage = layui.laypage;

                    //执行一个laypage实例
                    laypage.render({
                        elem: 'new_page',
                        count: e.pageBean.count,
                        curr:pagenum,
                        jump: function(obj, first){

                            if(!first){
                                pagenum = obj.curr;
                                gettable()
                            }
                        }
                    });
                });
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

   function getInfo(data) {
        var time;
      var yearMonth="";
      var day="";
      var html="";
      var title="";
      var content="";
      var contents="";
       var name="";
       var id;
     for(var i=0;i<data.length;i++){
         id=data[i].id;
       if(data[i].createTime!=undefined){
           time=data[i].createTime;
           yearMonth= getTime(data[i].createTime).split("/")[0]+"-"+getTime(data[i].createTime).split("/")[1];
           day= getTime(data[i].createTime).split("/")[2].split(" ")[0];
       }
       if(data[i].user!=undefined){
           name=data[i].user.name;
       }
       if(data[i].title!=undefined){
           title=data[i].title
       }
         if(data[i].cotent!=undefined){
             contents=data[i].cotent;
             content=data[i].cotent;
           if(data[i].cotent.split("").length>40){
               content=data[i].cotent.substring(0,40);
           }

         }
        html=html+"<div class='xwzx2_content'><div class='xwzx2_date'> <h3>"+day+"</h3><h5>"+yearMonth+"</h5>" +
            " </div> <div class='xwzx2_shuxian' id='xw"+id+"'></div> <div  class='xwzx2_text' id='xws"+id+"'> <h2 style='height: 30px'>"+title+"  <button class='layui-btn layui-btn-xs layui-btn-radius layui-btn-normal' style='text-align: right' onclick='newsDetail("+id+","+time+",\""+name+"\")'" +
            " id='btn"+id+"'>展开...</button></h2>  <p id='p"+id+"'>"+content+"</p><p id='ps"+id+"' style='display: none'>"+contents+"</p><h2 style='display: none' id='user"+id+"' style='font-size: 15px;color: gray'></h2><h2 style='display: none' id='h2"+id+"' style='font-size: 15px;color: gray'></h2> </div> <div class='cb'></div></div>";
            " id='btn"+id+"'>展开...</button></h2>  <p id='p"+id+"'>"+content+"</p><h2 style='display: none' id='user"+id+"' style='font-size: 15px;color: gray'></h2><h2 style='display: none' id='h2"+id+"' style='font-size: 15px;color: gray'></h2></div> <div class='cb'> <img src='img/zan3.png' style='width: 30px;height: 20px'></div></div>";

  }
$('#content').html(html);

   }
function getTime(time) {
    var unixTimestamp = new Date( time ) ;
    commonTime = unixTimestamp.toLocaleString();
    return commonTime;
}
function newsDetail(id,time,name,) {
    $('#h2'+id).show();
    $('#p'+id).hide();
    $('#ps'+id).show();
    $('#user'+id).show();
    $('#h2'+id).html("发布时间："+getTime(time));

    $('#h2'+id).css("font-size","15px");
    $('#h2'+id).css("color","gray");
    $('#user'+id).css("font-size","15px");
    $('#user'+id).css("color","gray");
    $('#user'+id).html("发布人:"+name);
    var h= $("#xws"+id).outerHeight(true);
    $("#xw"+id).css("height", h-26+"px");
    $("#btn"+id).html("收起...");
    $("#btn"+id).attr("onclick","small("+id+","+time+",\""+name+"\")");
}
function small(id,time,name) {
    $('#p'+id).show();
    $('#ps'+id).hide()
    $('#h2'+id).hide();
    $('#user'+id).hide();
    $("#xw"+id).css("height", 80+"px");
    $("#btn"+id).html("展开...");
    $("#btn"+id).attr("onclick","newsDetail("+id+","+time+",\""+name+"\")");

}






</script>
<style>
    .rl{
        padding-right:40px;
        padding-left:40px;
    }
    .nnav{
        margin-top: 0;
        margin-bottom: 0;
    }
    .nav_content h1{
        font-size: 20px;
    }
</style>